extends layout
append scripts
    script.
        $(function() {
            $("#test").hover(function(){ $(this).css("background-color","#cccccc"); });  // 选取当前 HTML 元素
            $('p.test').dblclick(function(){ $("body p#test").hide(); });  // 选取 <p class='test'>
            $('button').click(function(){    // 元素选择器, 基于元素名
                $("#test").hide();           // id 选择器, id 是唯一的
                $(".test").hide();           // class 选择器
                // $("*")	                 // 选取所有元素
                // $('body p')               // <body> 下的 所有 <p>
                // $("p.intro")	             // 选取 class 为 intro 的 <p> 元素
                // $("p:first")	             // 选取第一个 <p> 元素
                // $("ul li:first")          // 选取第一个 <ul> 元素的第一个 <li> 元素
                // $("ul li:first-child")    // 选取每个 <ul> 元素的第一个 <li> 元素
                // $("[href]")               // 选取带有 href 属性的元素
                // $("a[target='_blank']")   // 选取所有 target 属性值等于 "_blank" 的 <a> 元素
                // $("a[target!='_blank']")  // 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
                // $("a[id1='1'][id='id']")  // 多个属性值选取
                // $(":button")              // 选取所有 type="button" 的 <input> 元素 和 <button> 元素
                // $("tr:even")	             // 选取偶数位置的 <tr> 元素
                // $("tr:odd")               // 选取奇数位置的 <tr> 元素
                // $('[class^="icon-"]');    // 找出所有 class 包含至少一个以 `icon-` 开头的 DOM
                // $('p.red,p.green');       // 把 <p class="red"> 和 <p class="green"> 都选出来
            });
            console.log($('p').length);  // 数一数页面有多少个 <p> 节点
            console.log($('.red.green'));  // 查找同时包含 red 和 green 的节点, 注意没有空格
            // jquery & dom 相互转换
            var div = $('#test'); console.log(div);  // 返回的对象是 jQuery 对象, 类似数组, 它的每个元素都是一个引用了 DOM 节点的对象
            var div = $('#test'); console.log(div[0]);  // 返回 DOM 对象, 下面的作用相同
            var div = $('#test'); console.log(div.get(0));
            // 如果不存在, 会返回 [], 不会返回 undefined 或者 null
            var divDom = div.get(0); console.log(divDom);  // 假设存在 div, 获取第 1 个 DOM 元素
            var another = $(divDom); console.log(another);  // 重新把 DOM 包装为 jQuery 对象
        });
block content
    p#test id_段落
    p.test.red.green class_段落
    button 点我
